import { log } from "console";
import { ElButton } from "element-plus";
import { computed, defineComponent, ref, watch } from "vue";
import Pagination from "~/src/components/Pagination";
import SelectMzjf from "~/src/components/SelectMzjf";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';

interface ItemInfo {
    id: string;
    title: string;
    money: string;
}

export default defineComponent({
    setup: function () {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const datas = [
            { id: "1", title: "CT", money: "200" },
            { id: "2", title: "血常规", money: "500" },
            { id: "3", title: "X光", money: "1000" },
            { id: "4", title: "MRI", money: "2000" },
            { id: "5", title: "尿常规", money: "500" },
            { id: "6", title: "甲功", money: "1000" },
            { id: "7", title: "超声", money: "2000" },
            { id: "8", title: "体温", money: "500" },
            { id: "9", title: "心电图", money: "500" },
            { id: "10", title: "血压", money: "1000" },
        ];

        const showDatas = ref<ItemInfo[]>([]);
        const checkedIds = ref<string[]>([]);
        const checkAll = ref(false); // 控制"全部支付"复选框状态

        // 处理分页
        const handlePageChange = (Datas: any) => {
            showDatas.value = Datas;
        };

        // 单个项目勾选处理
        const handleItemCheck = (id: string) => {
            if (checkedIds.value.includes(id)) {
                // 取消勾选
                checkedIds.value = checkedIds.value.filter(item => item !== id);
                checkAll.value = false; // 有项目取消勾选，全选状态应为false
            } else {
                // 勾选
                checkedIds.value = [...checkedIds.value, id];
                // 检查是否所有项目都被勾选
                checkAll.value = checkedIds.value.length === datas.length;
            }
        };

        // 全选/取消全选处理
        const handleCheckAll = () => {
            if (checkAll.value) {
                // 全选：选中所有项目
                checkedIds.value = datas.map(item => item.id);
            } else {
                // 取消全选：清空所有选中
                checkedIds.value = [];
            }
        };

        // 计算选中的总金额
        const totalAmount = computed(() => {
            return checkedIds.value.reduce((sum, id) => {
                const item = datas.find(item => item.id === id);
                return sum + (item ? Number(item.money) : 0);
            }, 0).toFixed(2);
        });

        return () => <>
            <div class={Style.top}>
                <UserInfo></UserInfo>
                <Steps></Steps>
                <div class={Style.container_mar}>
                    <div class={Style.body}>
                        <div>
                            {showDatas.value.map((item) => (
                                <SelectMzjf
                                    key={item.id}
                                    style={{ marginTop: "28px" }}
                                    id={item.id}
                                    title={item.title}
                                    money={item.money}
                                    checked={checkedIds.value.includes(item.id)}
                                    onHandleClick={(id) => handleItemCheck(id)}
                                ></SelectMzjf>
                            ))}
                        </div>
                    </div>
                    <Pagination
                        style={{ marginTop: "20px", padding: "0 64px", marginBottom: "10px" }}
                        pageSize={4}
                        Data={datas}
                        onPageChange={handlePageChange}
                    ></Pagination>
                    <div class={Style.body}>
                        <SelectMzjf
                            style={{ marginTop: "28px" }}
                            totalAmount={totalAmount.value}
                            checkedAll={checkAll.value}
                            checkedCount={checkedIds.value.length}
                            onCheckAllChange={handleCheckAll}
                        >
                            {{
                                btn: () => (
                                    <div class="mainZyyjBtn_zy">
                                        <ElButton class={[Style.zyyjbtn]} type="success">
                                            去支付
                                        </ElButton>
                                    </div>
                                )
                            }}
                        </SelectMzjf>
                    </div>
                </div>
            </div>
        </>;
    }
})
